<template>
    <div class="sidebar" style="height:100%">
        <el-row class="menu_page" style="background:#21118D">
            <el-col>
                <el-menu
                        mode="vertical"
                        class="admin-el-menu"
                        :collapse="collapse"
                        :default-active="$route.path"
                        active-text-color="#FFF"
                        background-color="#041049"
                        unique-opened
                        collapse-transition
                        text-color="#FFF">
                    <div class="wrapper" ref="wrapper">
                        <Menu :items='items'/>
                    </div>
                </el-menu>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import bus from "../util/bus";
    import Menu from "./Menu";
    import Bscroll from 'better-scroll'
    // @ is an alias to /src
    export default {
        name: "LeftMenu",
        data() {
            return {
                collapse: false,
                items: [
                    {
                        icon: "el-icon-office-building",
                        name: "建筑系统",
                        path: "1",
                        children: [
                            {
                                path: "/BuildingTl",
                                name: "任务列表"
                            },
                            {
                                path: "/BuildingQc",
                                name: "数据质检"
                            },
                            {
                                path: "/BuildingDi",
                                name: "数据入库"
                            },
                        ]
                    },
                    {
                        icon: "el-icon-heavy-rain",
                        name: "供水系统",
                        path: "2",
                        children: [
                            {
                                path: "/WaterTl",
                                name: "任务列表"
                            },
                            {
                                path: "/WaterQc",
                                name: "数据质检"
                            },
                            {
                                path: "/WaterDi",
                                name: "数据入库"
                            },
                        ]
                    },
                    {
                        icon: "el-icon-odometer",
                        name: "燃气系统",
                        path: "3",
                        children: [
                            {
                                path: "/GasTl",
                                name: "任务列表"
                            },
                            {
                                path: "/GasQc",
                                name: "数据质检"
                            },
                            {
                                path: "/GasDi",
                                name: "数据入库"
                            },
                        ]
                    },
                    {
                        icon: "el-icon-guide",
                        name: "交通系统",
                        path: "4",
                        children: [
                            {
                                path: "/TrafficTl",
                                name: "任务列表"
                            },
                            {
                                path: "/TrafficQc",
                                name: "数据质检"
                            },
                            {
                                path: "/TrafficDi",
                                name: "数据入库"
                            },
                        ]
                    },
                    {
                        icon: "el-icon-data-line",
                        name: "电力系统",
                        path: "5",
                        children: [
                            {
                                path: "/ElectricityTl",
                                name: "任务列表"
                            },
                            {
                                path: "/ElectricityQc",
                                name: "数据质检"
                            },
                            {
                                path: "/ElectricityDi",
                                name: "数据入库"
                            },
                        ]
                    },
                    {
                        icon: "el-icon-chat-line-square",
                        name: "通信系统",
                        path: "6",
                        children: [
                            {
                                path: "/CorrespondTl",
                                name: "任务列表"
                            },
                            {
                                path: "/CorrespondQc",
                                name: "数据质检"
                            },
                            {
                                path: "/CorrespondDi",
                                name: "数据入库"
                            },
                        ]
                    },
                    // {
                    //     icon: "el-icon-setting",
                    //     name: "统计",
                    //     path: "7",
                    //     children: [
                    //         {
                    //             path: "/",
                    //             name: "数据统计"
                    //         },
                    //         {
                    //             path: "/",
                    //             name: "明细统计"
                    //         },
                    //         {
                    //             path: "/",
                    //             name: "数据入库"
                    //         },
                    //     ]
                    // },
                    // {
                    //     icon: "el-icon-user",
                    //     name: "用户管理",
                    //     path: "8",
                    //     children: [
                    //         {
                    //             path: "/",
                    //             name: "修改密码"
                    //         },
                    //         {
                    //             path: "/",
                    //             name: "用户管理"
                    //         },
                    //         {
                    //             path: "/",
                    //             name: "角色管理"
                    //         },
                    //     ]
                    // },
                    {
                        icon: "el-icon-user",
                        name: "用户管理",
                        path: "/UserMain"
                    },
                    {
                        icon: "el-icon-document",
                        name: "任务日志",
                        path: "/UserLog"
                    },
                    // {
                    //     icon: "el-icon-setting",
                    //     name: "系统配置",
                    //     path: "/Settings"
                    // }
                ],
            };
        },
        components: {
            Menu
        },
        methods: {
            initScroll() {
                this.scroll = new Bscroll(this.$refs.wrapper, {})
            }
        },
        mounted() {
            this.$nextTick(() => {
                this.initScroll()
            })
        },
        created() {
            // 通过 Event Bus 进行组件间通信，来折叠侧边栏
            bus.$on("collapse", msg => {
                this.collapse = msg;
            });
        }
    };
</script>
<style scoped>
    .menu_page {
        position: fixed;
        top: 60px;
        left: 0;
        min-height: 100%;
        z-index: 99;
    }

    .sidebar {
        position: relative;
        overflow: hidden;
    }

    .wrapper {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: calc(100% - 70px);
        /*height: 100%;*/
        overflow: hidden;
        overflow-y: auto;
    }

    li *:hover {
        text-decoration: none;
    }

    a:hover {
        text-decoration: none;
    }

    .sidebar::-webkit-scrollbar {
        width: 0;
    }

    .sidebar-el-menu:not(.el-menu--collapse) {
        width: 250px;
    }

    .el-menu {
        border: none;
        z-index: 99;
    }

    .fa-margin {
        margin-right: 5px;
    }

    .admin-el-menu:not(.el-menu--collapse) {
        width: 180px;
        min-height: 640px;
        height: 100vh;
    }

    .admin-el-menu {
        width: 49px;
    }

    .el-submenu .el-menu-item {
        min-width: 180px;
    }

    .hiddenDropdown,
    .hiddenDropname {
        display: none;
    }
</style>
